<template>
  <!-- 商家互联》记账本 -->
  <div class="app-container ">
      <!-- <div class="tip" @click="openUrl('https://imgage.maimaihao.com/videoDoc/%E8%B4%A2%E5%8A%A1%E7%B3%BB%E7%BB%9F%E8%AE%B2%E8%A7%A3.mp4')">不会操作？查看视频教程</div> -->
      <el-form :model="queryParams" ref="queryForm" :inline="true" class=" search-form-new " label-width="68px">
        <el-form-item label="收支类型" prop="type">
          <el-select v-model="queryParams.type" placeholder="请选择类型" size="small" clearable >
            <el-option v-for="(dict, i) in iotypeOptions" :key="i" :label="dict.name" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="账单类型" prop="bookType">
          <el-select v-model="queryParams.bookType" placeholder="请选择类型" size="small" clearable >
            <el-option v-for="dict in billTypeList" :key="dict.id" :label="dict.bookType" :value="dict.bookType" />
          </el-select>
        </el-form-item>
        <el-form-item label="对方名称" prop="duifangmingcheng">
          <el-input v-model="queryParams.duifangmingcheng" placeholder="请输入对方名称" clearable size="small" />
        </el-form-item>
        <el-form-item label="经办人" prop="jingbanren">
          <el-input v-model="queryParams.jingbanren" placeholder="请输入经办人" clearable size="small" />
        </el-form-item>
        <el-form-item label="明细" prop="mingxi">
          <el-input v-model="queryParams.mingxi" placeholder="请输入明细关键字" clearable size="small" />
        </el-form-item>
        <el-form-item label="备注" prop="beizhu">
          <el-input v-model="queryParams.beizhu" placeholder="请输入备注关键字" clearable size="small" />
        </el-form-item>
        <el-form-item label="日期" prop="">
          <el-date-picker style="width:215px" size="small" v-model="timer" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="search">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" icon="el-icon-search" size="small" @click="search" class="zdy-btn">搜索</el-button>
          <el-button icon="el-icon-refresh" type="primary" size="small" plain @click="resetQuery" class="zdy-btn zdy-btn-refresh">重置</el-button>
          <el-button v-hasPermi="['jizhangben:add']" icon="el-icon-plus" type="success" size="small" @click="addACount" class="zdy-btn zdy-btn-refresh">新增</el-button>
          <el-button v-hasPermi="['jizhangben:export']" size="small" icon="el-icon-download" type="success" @click="importExl">导出</el-button>
          <el-button v-hasPermi="['jizhangben:typeConfig']" icon="el-icon-document-copy" type="primary" size="small" class="zdy-btn zdy-btn-refresh" @click="opentypeConfig">账单类型</el-button>
        </el-form-item>
      </el-form>
      <div class="table_box">
        <el-table  :data="tableData.records"   >
          <!-- <el-table-column label="序号" width="80" label-position="left">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column> -->
          <el-table-column  label="时间" width="160" prop="createTime" />

          <el-table-column label="收支类型" width="100" prop="type">
            <template slot-scope="scope">
              <span>{{ type[scope.row.type] }}</span>
            </template>
          </el-table-column>
          <el-table-column label="账单类型" width="100" prop="bookType">
           
          </el-table-column>
          <el-table-column  label="对方名称" min-width="100"  prop="duifangmingcheng" />
          <!-- <el-table-column  label="对方账户"  width="100" prop="duifangzhanghu" />
          <el-table-column  label="本方名称" width="100"  prop="benfangmingcheng" />
          <el-table-column  label="本方账户" width="100" prop="benfangzhanghu" /> -->
          <el-table-column  label="金额"  prop="jine" >
            <template slot-scope="scope">
              <span style="color: red;">¥</span> <span style="color: red;font-size: 18px;">{{ scope.row.jine }}</span>
            </template>
          </el-table-column>



          <!-- <el-table-column label="明细" show-overflow-tooltip="" min-width="150" prop="mingxi" /> -->
          

          <!-- <el-table-column fixed="right" label="状态" width="100">
                <template slot-scope="scope">
                  <el-button type="text" style="color: red" size="mini" v-if="scope.row.status == 2">待支付</el-button>
                  <el-button type="text" style="color: #333" size="mini" v-if="scope.row.status == 1">已支付</el-button>
                </template>
              </el-table-column> -->
          <el-table-column label="创建人" width="110" prop="createName" />
          <el-table-column label="经办人" width="110" prop="jingbanren" />
          <el-table-column label="复核人" width="110" prop="fuheren" />
          <el-table-column label="备注" show-overflow-tooltip min-width="120" prop="beizhu" />
          <el-table-column  label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text"  @click="detail(scope.row)">查看详情</el-button>
              <el-button type="text" v-hasPermi="['jizhangben:edit']" @click="handleUpdate(scope.row)">编辑</el-button>
              <el-button type="text" v-hasPermi="['jizhangben:del']" style="color: red"  @click="delItem(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pages-box">
          <pagination v-show="tableData.total > 0" :total="tableData.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>
      </div>

    <!-- 一下是弹出框 -->
    <addDialog ref="addDialog" ></addDialog>
    <configDialog ref="configDialog" @closed="getTypeList"></configDialog>
    <detailDialog ref="detailDialog"></detailDialog>
  </div>
</template>

<script>
import addDialog from "./add.vue";
import detailDialog from "./detail.vue";
import configDialog from "./typeConfig.vue";
import jizhangbenApi from "@/api/financeCenter/jizhangben.js";
export default {
  name: "financial",
  components: { addDialog, configDialog, detailDialog },
  data() {
    return {
      tabActive: 0,
      tableData: {
        records: [],
        total: 0,
      },
      timer: [],
      h5link: "",
      loading: false,
      billTypeList: [],
      billTypeListMap: {},
      type: {
        1: "收入",
        2: "支出",
      },
      iotypeOptions: [
        {
          name: "收入",
          value: 1,
        },
        {
          name: "支出",
          value: 2,
        },
      ],
      // statusList: [
      //   {
      //     name: "待支付",
      //     value: "2",
      //   },
      //   {
      //     name: "已支付",
      //     value: "1",
      //   },
      // ],
      // actived: "2",
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        billType: "",
        remark: "",
      },
      typeConfig: null,
      userInfo: "",
    };
  },
  created() {
    this.getList();
    this.getTypeList();

  },
  methods: {
    openUrl(url) {
      window.open(url);
    },
    // 获取列表
    getList() {
      if (this.timer && this.timer.length == 2) {
        this.queryParams.createTimeStart = this.timer[0] + " 00:00:00";
        this.queryParams.createTimeEnd = this.timer[1] + " 23:59:59";
      } else {
        this.queryParams.createTimeStart = "";
        this.queryParams.createTimeEnd = "";
      }
      this.tableData.records = [];
      this.loading = true;
      this.$nextTick(() => {
        jizhangbenApi
          .getTallyBookList(this.queryParams)
          .then((response) => {
            this.$nextTick(() => {
              this.loading = false;
              this.tableData.records = JSON.parse(
                JSON.stringify(response.rows)
              );
              this.tableData.total = response.total;
            });
          })
          .catch((err) => {
            this.loading = false;
          });
      });
    },
    // 获取账单类型列表
    getTypeList() {
      jizhangbenApi.getTypeList().then((res) => {
        this.billTypeList = res.rows;
      
      });
    },
  
    // 搜索
    search() {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 20;
      this.getList();
    },
   
    // 导出
    importExl() {
     
      this.loading = true;
      if (this.timer && this.timer.length == 2) {
        this.queryParams.createTimeStart = this.timer[0] + " 00:00:00";
        this.queryParams.createTimeEnd = this.timer[1] + " 23:59:59";
      } else {
        this.queryParams.createTimeStart = "";
        this.queryParams.createTimeEnd = "";
      }
      jizhangbenApi.tallyBookExport(this.queryParams).then((res) => {
        this.$download.downloadFile(res,'记账本导出');
        this.loading = false;
      });
    },
    // handleChange
    handleChange(file, fileList) {},
    // before
    before(file) {},
    // 打开配置弹窗
    opentypeConfig() {
      this.$refs.configDialog.open();
    },
    //重置
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 20,
      };
      this.timer = [];
      this.getList();
    },

    // 新增
    addACount() {
      this.$refs.addDialog.open("add");
    },
    // 查看详情
    detail(row){
      this.$refs.detailDialog.open(row);
    },
    // 双击编辑
    handleUpdate(row) {
      this.$refs.addDialog.open('edit',row);
    },
    // 删除记录
    delItem(row) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          jizhangbenApi.delTallyBook(row.id).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getList()
          });
        })
        .catch(() => {});
    },

 
  },
};
</script>
<style lang="scss" scoped>
.search-form-new {
  box-shadow: none;
}
.zdy-main {
  margin-top: 16px;
  height: calc(100vh - 150px);
  overflow: auto;
  .table-box {
    padding-bottom: 10px;
  }
}
</style>
